<template>
  <div class="container">
    <h3>实现图片编辑,查看,删除按钮</h3>
    <div class="uploadList d-flex">
      <el-upload :action="uploadApi" class="col-4 col-lg-2 p_c_test_border " :show-file-list="false"
                 v-for="(item,index) in fileList" :key="index" :on-exceed="handleExceed"
                 :on-success="(r, f, l) => handleSuccess(r, f, l, item,index)">
        <div class="w-100 ratio ratio-1x1 p_c_test_border">
          <img class="el-upload-list__item-thumbnail" :src="item.url" alt="">
          <div class="d-flex">
            <div @click.stop="handlePictureCardPreview(item)"
                 class="position-relative col-4 h-100 d-flex justify-content-center align-items-center btn-hover">
              <i class="el-icon-zoom-in fs-1"></i>
            </div>
            <div @click="handleEdit(item)"
                 class="position-relative col-4 h-100 d-flex justify-content-center align-items-center btn-hover">
              <i class="el-icon-edit fs-1"></i>
            </div>
            <div @click.stop="handleRemove(item)"
                 class="position-relative col-4 h-100 d-flex justify-content-center align-items-center btn-hover">
              <i class="el-icon-delete fs-1"></i>
            </div>
          </div>
        </div>
      </el-upload>
      <el-upload :action="uploadApi" :show-file-list="false"
                 :on-success="(r, f, l) => handleSuccess(r, f, l, undefined, 0)" :on-exceed="handleExceed"
                 class="col-4 col-lg-2 d-flex justify-content-center align-items-center p_c_test_border">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <hr>
    <div class="uploadList d-flex">
      <el-upload :action="uploadApi" class="col-4 col-lg-2 p_c_test_border " :show-file-list="false"
                 v-for="(item,index) in fileList" :key="index" :on-exceed="handleExceed"
                 :on-success="(r, f, l) => handleSuccess(r, f, l, item,index)">
        <div class="w-100 ratio ratio-1x1 p_c_test_border">
          <img class="el-upload-list__item-thumbnail" :src="item.url" alt="">
          <div class="d-flex justify-content-around align-items-center" @click.self="(e)=>handelStop(e)">
            <i @click.stop="handlePictureCardPreview(item)"
               class="el-icon-zoom-in position-relative p-1 fs-4 btn btn-outline-primary"></i>
            <i @click="handleEdit(item)"
               class="el-icon-edit position-relative p-1 fs-4 btn btn-outline-primary"></i>
            <i @click.stop="handleRemove(item)"
               class="el-icon-delete position-relative p-1 fs-4 btn btn-outline-primary"></i>
          </div>
        </div>
      </el-upload>
      <el-upload :action="uploadApi" :show-file-list="false"
                 :on-success="(r, f, l) => handleSuccess(r, f, l, undefined, 0)" :on-exceed="handleExceed"
                 class="col-4 col-lg-2 d-flex justify-content-center align-items-center p_c_test_border">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import {FileApi} from "@/api/api";

export default {
  name: 'TestUpload',
  data() {
    return {
      fileList: [
        {url: require("@/assets/route.webp")},
      ],
      dialogImageUrl: '',
      dialogVisible: false,
      uploadApi: process.env.VUE_APP_BASE_URL + FileApi,
      disabled: false
    };
  },
  methods: {
    handleExceed(file, fileList) {
      console.log('handleExceed', file);
    },
    handleRemove(file) {
      console.log('handleRemove', file);
    },
    handlePictureCardPreview(file) {
      console.log('handlePictureCardPreview', file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList, item, index) {
      console.log('handleSuccess', item, response, file, fileList);
      if (item === undefined) {
        this.fileList.push({url: response.data})
      } else {
        item.url = response.data
      }
    },
    handleEdit(file) {
      console.log('handleEdit', file);
    },
    handelStop(e) {
      console.log('handelStop', e)
      e.stopPropagation()
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .el-upload {
  width: 100%;
  //display: block;
}

.btn-hover {
  &:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    opacity: 0.4; /* 初始时完全透明 */
    transition: opacity 0.3s ease; /* 添加过渡效果 */
    pointer-events: none; /* 确保遮罩层不会干扰鼠标事件 */
  }
}
</style>